import React, { Component } from 'react';
/*接收参数：
element:表示滚动元素
isLoading是否正在加载
hasMore是否有更多
loadMore获取更多的方法
*/
class ScrollList extends Component {
    constructor(){
        super()
        //绑过一次就不用再绑定用flag
        this.state={flag:false}
    }
    //组件将要接收数据的时候，只要父组件有新的变化就执行,如果父组件没发生状态变化，组件不更新
    componentWillReceiveProps(nextProps){ 
        console.log(this.props)
        //等待接收的属性有element再绑定事件
        if(nextProps.element && !this.state.flag){  //没绑过就要去绑定，绑过就不再绑定
            nextProps.element.addEventListener('scroll',()=>{
                //节流
                clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                   //判断scrollTop,offsetHeight,scrollHeight
                    let {scrollTop,offsetHeight,scrollHeight} = nextProps.element
                    console.log(scrollTop,offsetHeight,scrollHeight)
                    //距离底部还有20像素就开始加载
                    if(scrollTop+offsetHeight+20 > scrollHeight && this.props.hasMore && !this.props.isLoading){
                        this.props.loadMore();
                    }

                },30)
                
            })
            this.setState({flag:true})
        }
    }
    render() { 
        return ( 
            <div>
                {this.props.children}
            </div>
         );
    }
}
 
export default ScrollList;